<template>
<div>
  <!-- 权益列表 -->
  <div class="title-name"><span>客户权益</span></div>
  <div style="margin:10px 15px;">
    <div>
      <span><el-date-picker v-model="rightDateRange" type="daterange" size="mini" style="width:220px;" :clearable="false"></el-date-picker></span>
      <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="toQuerRights">查询</el-button></span>
    </div>
    <div style="margin-top:6px;">
      <el-table border stripe show-summary :summary-method="tableSumMethod" :data="rightsList">
        <el-table-column prop="create_date" label="日期" width="110px"></el-table-column>
        <el-table-column prop="investor_code" label="资金号" width="110px"></el-table-column>
        <el-table-column prop="investor_name" label="名称" width="130px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="rights" label="期末权益"></el-table-column>
      </el-table>
    </div>
  </div>
  <!-- 提成列表 -->
  <div class="title-name"><span>佣金提成</span></div>
  <div style="margin:10px 15px;">
    <div>
      <span><el-date-picker v-model="commDateRange" type="daterange" size="mini" style="width:220px;" :clearable="false"></el-date-picker></span>
      <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="toQueryComm">查询</el-button></span>
    </div>
    <div style="margin-top:6px;">
      <el-table border stripe show-summary :summary-method="tableSumMethod" :data="commList">
        <el-table-column prop="comm_date" label="日期" width="110px"></el-table-column>
        <el-table-column prop="investor_code" label="资金号" width="110px"></el-table-column>
        <el-table-column prop="investor_name" label="名称" width="130px"></el-table-column>
        <el-table-column prop="per_tax_comm" label="佣金"></el-table-column>
      </el-table>
    </div>
  </div>
</div>
</template>

<script>
import { datetimeToStr, getMonthDatePoint } from '@/utils/datetimeUtils'
import { getMyRights, getMyCommission } from '@/api/departmentWork/customer'
export default{
  data(){
    return {
      rightDateRange: [],
      rightsList: [],

      commDateRange: [],
      commList: []
    }
  },
  mounted() {
    this.setCurrentDates()
    this.toQuerRights()
    this.toQueryComm()
  },
  methods:{
    tableSumMethod(param){
      const { columns, data } = param;
      const sums = [];
      const sumColumnIndexes = [3]
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => Number.isNaN(value)) && sumColumnIndexes.indexOf(index)>-1) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!Number.isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        } else {
          sums[index] = '';
        }
      });

      return sums;
    },

    setCurrentDates(){
      this.rightDateRange = getMonthDatePoint(new Date(), 'current')
      let monthList = getMonthDatePoint(new Date(), 'previous')
      this.commDateRange = getMonthDatePoint(monthList[0], 'previous')
    },

    // 查询权益
    toQuerRights(){
      const paraData = {
        start: datetimeToStr(this.rightDateRange[0], true, ''),
        end:datetimeToStr(this.rightDateRange[1], true, '')
      }
      getMyRights(paraData).then(res => {
        this.rightsList = res.data
      })
    },

    // 查询佣金
    toQueryComm(){
      const paraData = {
        start: datetimeToStr(this.commDateRange[0], true, ''),
        end:datetimeToStr(this.commDateRange[1], true, '')
      }
      getMyCommission(paraData).then(res => {
        this.commList = res.data
      })
    },
  }
}
</script>

<style scoped lang="scss">
.title-name{
  line-height: 22px;
  background-image:linear-gradient(to right,rgba(39,206,255,1),rgba(193, 237, 255, 1.0),rgba(255,255,255,1));;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  border-left:5px solid #FFAE0D;
  span{
    margin-left:10px;
    color:#fff;
    font-weight:700;
  }
}
</style>
